<template>
  <view class="order-detail">
    <!-- 订单状态 -->
    <view class="order-status">
      <view class="status-icon">
        <van-icon name="checked" size="40" color="#07c160" />
      </view>
      <view class="status-text">支付成功</view>
      <view class="status-desc">感谢您的购买</view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <van-button plain type="primary" size="small" round @click="contactCustomerService">
        联系客服
      </van-button>
      <van-button type="primary" size="small" round @click="backToHome">
        返回首页
      </van-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      contactCustomerService() {
        uni.makePhoneCall({
          phoneNumber: '4001234567'
        })
      },
      backToHome() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-detail {
    padding-bottom: 20px;
  }

  .order-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    background-color: #fff;
    margin-bottom: 10px;

    .status-icon {
      margin-bottom: 10px;
    }

    .status-text {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .status-desc {
      font-size: 14px;
      color: #999;
    }
  }

  .section-title {
    padding: 10px 15px;
    font-size: 14px;
    color: #999;
    background-color: #f5f5f5;
  }

  .order-goods,
  .order-summary,
  .order-amount {
    margin: 10px 0;
    background-color: #fff;

    .info-item {
      display: flex;
      padding: 10px 15px;
      border-bottom: 1px solid #f5f5f5;

      .label {
        width: 80px;
        font-size: 14px;
        color: #666;
      }

      .value {
        flex: 1;
        font-size: 14px;
        text-align: right;
      }
    }
  }

  .order-goods {
    .order-item {
      display: flex;
      padding: 10px 15px;
      border-bottom: 1px solid #f5f5f5;

      .product-image {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        margin-right: 10px;
      }

      .product-info {
        flex: 1;

        .product-name {
          font-size: 14px;
          margin-bottom: 5px;
        }

        .product-desc {
          font-size: 12px;
          color: #999;
        }
      }

      .product-price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .quantity {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }

  .order-amount {
    .amount-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      border-bottom: 1px solid #f5f5f5;

      .label {
        font-size: 14px;
        color: #666;
      }

      .value {
        font-size: 14px;
      }

      &.total {
        .value {
          font-size: 16px;
          font-weight: bold;
          color: #f44;
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background-color: #fff;

    .van-button {
      margin: 0 5px;
    }
  }
</style>